---
title: "最大高度"
# description: "Utilities for setting the maximum height of an element"
description: "用来设置元素最大高度的功能类"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/maxHeight'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirst } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirst,
}

<!-- ## Usage -->
## 使用方法

<!-- Set the maximum height of an element using the `max-h-full` or `max-h-screen` utilities. -->
使用 `max-h-full` 或 `max-h-screen` 功能类设置元素的最大高度。

```html lightBlue
<template preview>
  <div class="h-24 p-6 bg-light-blue-300 rounded-md">
    <div class="h-48 max-h-full p-6 bg-light-blue-500 flex items-center justify-center rounded font-semibold text-white">
      <span>.max-h-full</span>
    </div>
  </div>
</template>

<div class="h-24 ...">
  <div class="h-48 **max-h-full** ...">
    .max-h-full
  </div>
</div>
```

---

<!-- ## Responsive -->
## 响应式

<!-- To control the max-height of an element at a specific breakpoint, add a `{screen}:` prefix to any existing max-height utility. -->
要在特定的断点处控制元素的最大高度，请在任何现有的最大高度功能类前添加 `{screen}:` 前缀。

```html
<div class="h-48 max-h-full **md:max-h-screen** ...">
  <span>Target</span>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

---

<!-- ## Customizing -->
## 定制

### Max-height scale

<!-- Customize Tailwind's default max-height scale in the `theme.maxHeight` section of your `tailwind.config.js` file. -->
在您的 `tailwind.config.js` 文件的 `theme.maxHeight` 部分定制 Tailwind 的默认最大高度。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      maxHeight: {
+       '0': '0',
+       '1/4': '25%',
+       '1/2': '50%',
+       '3/4': '75%',
+       'full': '100%',
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在 [主题自定义文档](/docs/theme#customizing-the-default-theme) 中了解更多关于自定义默认主题的信息。

### 变体

<Variants plugin="maxHeight" name="max-height" />

### 禁用

<Disabling plugin="maxHeight" name="max-height" />
